<template>
	<div class="record-bg">
		<swiper-item class="swiper-item">
			<scroll-view scroll-y style="height: 1350rpx;width: 100%;">
				<div class="top-area">
					<div class="aui-top">
						<div class="u-flex">
							<div class="body-head" v-if="form.orderStatus">
								<div class="head-icon">
									<u-icon class="p-t-10" name="arrow-left" size="45"></u-icon>
								</div>
								
								<div class="head-title l-h-1" v-if="statusDescribe">
									<p>
										<span class="u-fb f-s-20">
											{{statusDescribe?statusDescribe:''}}
										</span>
									</p>
									<p style="line-height: 2;">
										<span class="u-fb f-s-10">
											{{daysRemaining?daysRemaining:''}}
										</span>
									</p>
								</div>
								
								<div class="head-title" v-else>
									<span class="u-fb f-s-20">
										{{form.orderStatus?form.orderStatus:''}}
									</span>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				
				<div class="bg-white u-mb-10 record-box border-radius-20">
					<!-- 收货地址 -->
					<div class="body-title">收货地址</div>
					<div class="body-cont">
						<div class="conlirow">
							<div class="cont-right">
								<P><span class="xmname">姓名：</span><span class="name">{{AddressObj.Name}}</span></P>
								<P><span class="xmname">电话：</span><span class="name">{{AddressObj.PhoneNum}}</span></P>
								<P><span class="xmname">地址：</span><span class="name">{{AddressObj.Region.replace(/'-'/g, '')}}
										{{AddressObj.Address}}</span></P>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 订单信息 -->
				<div class="bg-white record-box u-mt-10 u-mb-10 border-radius-20">
					<div class="aui-flex aui-flex-default aui-mar15 border-radius-20">
						<div class="aui-flex-goods">
							<img :src="goods.goodsImages.split(',')[0]" alt="">
						</div>
						<div class="aui-flex-title">
							<h2>{{form.goodsName}}</h2>
							<div class="aui-flex-tags" v-if="form.goodsTag">
								<u-tag
									  v-for="(item, index) in form.goodsTag.split(',')"
									  :key="index"
									  :text="item"
									  type="info"
									  mode="dark"
									  size="mini"
								></u-tag>
							</div>
							<div class="aui-flex aui-flex-clear">
								<div class="aui-flex-box" v-if="form.unitPrice">￥{{form.unitPrice}}/件</div>
								<div style="font-size: 14px;color: #333;" v-if="form.buyQuantity">x{{form.buyQuantity}}</div>
							</div>
						</div>
					</div>
					<div class="return-btn" v-if="form.orderStatus != '已完成'">
						<div></div><!-- 样式需要，不可删除 -->
						<u-button size="mini" @click="AfterSales">退换/售后</u-button>
					</div>
					<div>
						<div class="aui-flex aui-choice-white b-line flex-end">
							<div class="aui-flex-box">商品总额：</div>
							<div class="total-price">
								<span class="cont-small">￥</span>
								<span class="cont-bold">{{form.payAmount?form.payAmount:'0.00'}}</span>
							</div>
						</div>
						
						<div class="aui-flex aui-choice-white b-line" v-if="form.refundPrice">
							<div class="aui-flex-box">退款：</div>
							<div>
								<span class="cont-small">￥</span>
								<span class="cont-bold">{{form.refundPrice?form.refundPrice:'0.00'}}</span>
							</div>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">订单编号：</div>
							<div class="cont-gray">
								{{form.orderId?form.orderId:''}}
							</div>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">下单时间：</div>
							<div class="cont-gray">
								{{form.createTime?form.createTime:''}}
							</div>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">付款时间：</div>
							<div class="cont-gray">
								{{form.joinTime?form.joinTime:''}}
							</div>
						</div>
						
						<div v-if="form.DeliveryTime">
							<div class="aui-flex aui-choice-white b-line">
								<div class="aui-flex-box">发货时间：</div>
								<div class="cont-gray">
									{{form.deliveryTime?form.deliveryTime:''}}
								</div>
							</div>
							
							<div class="aui-flex aui-choice-white b-line">
								<div class="aui-flex-box">物流公司：</div>
								<div class="cont-gray">
									<text user-select='true'>{{form.courierName?form.courierName:''}}</text>
								</div>
							</div>
							
							<div class="aui-flex aui-choice-white b-line">
								<div class="aui-flex-box">物流单号：</div>
								<div class="cont-gray">
									<text user-select='true'>{{form.courierNumber?form.courierNumber:''}}</text>
								</div>
							</div>
						</div>
						
					</div>
				</div>
				
				<div style="height: 230rpx;"></div>
				<!-- 按钮 -->
				<div style="position: fixed;bottom: 0rpx;background-color: #f5f7f7e6;width: 100%;">
					<div class="u-pt-20 u-pb-20" style="width: 90%;margin: 0 auto;">
						<div v-if="form.orderStatus.includes('已发货')">
							<u-button type="warning" shape="square" @click="ConfirmReceipt">
								确认收货
							</u-button>
						</div>
						
						<div style="margin-top: 10px;">
							<u-button type="primary" shape="square" @click="goBack">
								关闭
							</u-button>
						</div>
					</div>
					
				</div>
				
				<!-- 模态框 -->
				<u-modal v-model="customerService_show" confirm-text="关闭" title="客服微信">
					<view class="slot-content">
						<rich-text :nodes="this.escape2Html(customerService.topPrompt)"></rich-text>
						<div class="u-center u-pt-5 u-pb-5">
							<u-image width="300rpx" height="300rpx" :src="customerService.csQrCode"
								@longpress="saveImg"></u-image>
						</div>
						<rich-text :nodes="this.escape2Html(customerService.bottomPrompt)"></rich-text>
					</view>
				</u-modal>
				
				<div style="height: 250rpx;"></div>
				
			</scroll-view>
		</swiper-item>
		
	</div>
</template>


<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				form: {},// 订单信息
				goods: {},// 商品信息
				addressObj: {},// 收货地址
				customerService: {},// 客服信息
				customerService_show: false,
				statusDescribe: '',
				daysRemaining: '',
			}
		},
		
		onLoad(options) {
			// 未登录跳转到登录页面
			let loginRes = this.checkLogin();
			if (!loginRes) {
			  return false;
			}
			
			if(this.isNotNull(options.recordId)){
				// 获取参与接龙记录的详情
				this.getRecordDetails(options.recordId);
			}
			
		},
			
		methods: {
			
			/** 
			 * 获取参与接龙记录的详情
			 */
			async getRecordDetails(recordId){
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/getOrderDetails",
					recordId: recordId,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					this.form = result.data;1
					if(this.form.address){
						this.AddressObj = JSON.parse(this.form.address);
					}
					
					if(this.form.orderStatus.includes('<br>')){
						this.statusDescribe = this.form.orderStatus.split('<br>')[0];
						this.daysRemaining = this.form.orderStatus.split('<br>')[1];
					}
					
					// 获取商品详情
					this.getGoodsDetails(this.form.goodsId, this.form.goodsNo);
					
				} else {
					this.showMSG("error", result.msg);
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},
			
			/**
			 * 获取商品详情
			 */
			async getGoodsDetails(goodsId, goodsNo) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/goods/get/" + goodsNo + "/" + goodsId,
				});
				if (result.code == 200) {
					this.goods = result.data; // 商品信息
					this.getCSInfo(this.goods.helpCsId); // 获取帮卖客服信息
				}
			},
			
			/**
			 * 获取帮卖客服详情
			 */
			async getCSInfo(helpCsId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/clientele/get/" + helpCsId,
				});
				if (result.code == 200) {
					this.customerService = result.data;
				}
			},
			
			/** 
			 * 确认收货
			 */
			async ConfirmReceipt(){
				this.showMSG("error", "此功能暂未开放！");
				/* const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyMiniRest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'GroupPurchase',
					wf_num: 'R_GroupPurchase_BL013',
					recordId: this.form.id,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					this.showMSG("success", result.msg);
					this.form = result.data;
				} else {
					this.showMSG("error", result.msg);
				} */
			},
			
			/**
			 * 退换、售后（点击联系客服）
			 */
			AfterSales(){
				console.log("********")
				console.log(this.customerService)
				if(this.isNotNull(this.customerService.csQrCode)){
					this.customerService_show = true
				} else{
					this.showMSG('none','请联系平台管理员')
				}
			},
		}
	}
</script>

<style scoped>
	.swiper-item{
		background-color: rgb(240, 240, 240);
	}
	
	.flex-space-between{
		justify-content: space-between;
	}
	
	.search-width{
		width: 75%;
	}
	
	.color-red{
		color: red;
	}
	
	.content {
	  display: flex;
	  align-items: center;
	}
	
	.box {
	    width: 95%;
	    background-color: #ffffff;
	    padding-top: 20rpx;
	    padding-bottom: 20rpx;
	    border-bottom: 1rpx #e5e5e5 solid;
		margin: 0 auto;
	}
	
	.aui{
		width: 95%;
		margin: 0 auto;
	}
	
	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}
	
	.aui-flex-title {
		color: #222;
		font-weight: normal;
		font-size: 1.1rem;
		overflow: hidden;
		width: 75%;
	}
	
	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 150rpx;
		font-size: 14px;
		color: #333;
	}
	
	.aui-flex-box h1 {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position:relative;
		padding-left:1rem;
	}
	
	.aui-flex-box h2 {
		color: #222;
		font-weight: normal;
		font-size: 1.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		padding-left: 1rem;
	}
	
	.aui-flex-box p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		margin-bottom: 0.1rem;
	}
	
	.cont-red{
		color: red;
	}
	
	.cont-bold{
		font-weight: bold;
	}
	
	.cont-small{
		font-size: smaller;
	}
	
	.cont-gray{
		color: gray;
	}
	
	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}
	
	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}
	
	.aui-flex-clear {
		padding: 0;
		margin-top: 20rpx;
	}
	
	.aui-flex-default {
		background: #fff;
	}
	
	.horizontal-line{
		height: 1rpx;
		background-color: #e0e0e0;
		width: 90%;
		margin: 0 auto;
	}
	
	.aui-top{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 15rpx 30rpx 30rpx;
	}
	
	.shop-avatar {
		width: 60rpx;
		height: 50rpx;
		text-align: center;
		padding-right: 10rpx;
	}
	
	.shop-avatar img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
		border-radius: 10rpx;
	}
	
	.u-fb{
		font-weight: bold;
	}
	
	h3{
		font-size: 30rpx;
		padding-left: 0
	}
	
	.h3-limit{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
	}
	
	.body-title {
		padding: 40rpx 40rpx 25rpx 40rpx;
		font-weight: bold;
	}
	
	.body-cont {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
	
	.conlirow {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0rpx 0rpx 20rpx 0rpx;
		height: 180rpx;
	}
	
	.cont-right {
		display: flex;
		flex-direction: column;
	}
	
	.cont-right p {
		width: 100%;
	}
	
	.xmname {
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		line-height: 22px;
	}
	
	.record-bg{
		background-color: #EAEAEA;
	}
	
	.bg-white{
		background-color: #FFFFFF;
	}
	
	.record-box{
		width: 95%;
		margin: 0 auto;
	}
	
	.body-head{
		display: flex;
		height: 40px;
	}
	
	.head-icon{
		width: 30px;
	}
	
	.head-title{
		width: 400px;
		line-height: 80rpx;
	}
	
	.l-h-1{
		line-height: 1;
	}
	
	.p-t-10{
		padding-top: 10px;
	}
	
	.f-s-20{
		font-size: 20px;
	}
	
	.f-s-10{
		font-size: 10px;
	}
	
	.top-area{
		background-color: #f1f0f0;
	}
	
	.flex-end{
		align-items: flex-end;
	}
	
	.total-price{
		font-size: 34rpx;
		color: red;
	}
	
	.border-radius-20{
		border-radius: 20rpx;
	}
	
	.return-btn{
		display: flex;
		justify-content: space-between;
		padding-right: 30rpx;
	}
	
	.slot-content {
		font-size: 28rpx;
		color: #a9a9a9;
		text-align: center;
		margin: 0 auto;
	}
	
</style>
